<template>
  <div class="tabbar-wrap">
    <div v-for="(item, index) in tabbar" class="tab-item">
      <router-link :to="{name:item.route}" class="icon-wrap" exact>
        <i class="iconfont" :class="item.type"></i>
        <p class="tab-txt">{{item.name}}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    tabindex: 0,
    tabbar: [
      {type: 'icon-home', name: '首页', route: 'shopkeeper'},
      {type: 'icon-linerank', name: '排名', route: 'keeperRank'},
      {type: 'icon-edit', name: '报名', route: 'keeperApply'},
      {type: 'icon-rule', name: '规则', route: 'keeperRule'}
    ]
  }),
  methods: {
  }
}
</script>

<style scoped lang="stylus">
.tabbar-wrap{
  width 100%
  height 3rem
  background #fff
  border-top 1px solid #161415
  display flex
  position fixed
  bottom 0
  z-index 999
  .tab-item{
    flex 1
    display flex
    flex-direction column
    color #161415
    align-items center
    justify-content space-around
    .icon-wrap{
      color #161415
      .icon-home ,.icon-linerank, .icon-edit, .icon-rule{
        font-size 1.5rem
      }
      .tab-txt{
        font-size 0.75rem
        padding-bottom 0.3rem
      }
    } 
    .router-link-exact-active{
      color #f06774
    }
  }
}
</style>
